<template>
  <div>
    <div v-show="!showCert">未查询到对应证书</div>
    <div v-show="showCert">
      <div class="frame" ref="certificate">
        <div id="qrcode" class="qr-box"></div>
        <div class="seal">
          <div class="seal-son">
            <span class="seal-span1">权威认证</span>
            <span class="seal-span2">童叟无欺</span>
          </div>
        </div>
        <div class="triangle triangle-topleft"></div>
        <div class="triangle triangle-topright"></div>
        <div class="triangle triangle-bottomleft"></div>
        <div class="triangle triangle-bottomright"></div>
        <div class="test stripes">
          <div class="title">{{certInfo.title}}</div>
          <div class="c-number">
            <span>证书编号：</span>
            <span>{{certInfo.certificateNo}}</span>
          </div>
          <div class="content">
            <div class="content-l">
              <div class="content-info">
                <el-row v-for="(val, key) in certInfo.labelInfoDic" :key="key" :gutter="5">
                  <el-col :span="10" class="label-l">
                    <label>{{key}}</label>
                  </el-col>
                  <el-col :span="14" class="label-r">
                    <label>{{val}}</label>
                  </el-col>
                </el-row>
              </div>
            </div>
            <div class="content-r">
              <div class="c-img">
                <img ref="certImg" :src="certInfo.imgBase64" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-button type="primary" plain @click="getImgBase64()">下载证书</el-button>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
import html2canvas from 'html2canvas'
import { getCertificateInfo } from '@/common/apis'

export default {
  name: 'CertificateInfo',
  data () {
    return {
      showCert: false,
      certInfo: {}
    }
  },
  mounted () {
    this.get()
    this.getUrlQRCode()
  },
  methods: {
    get () {
      getCertificateInfo({ certificateNo: this.$route.params.certNo }).then(
        (res) => {
          if (res.success) {
            this.certInfo = res.data
            this.showCert = true
          } else {
            this.showCert = false
          }
        },
        (err) => {
          console.log(err)
        }
      )
    },
    getUrlQRCode () {
      // eslint-disable-next-line no-unused-vars
      let qrCode = new QRCode('qrcode', {
        width: 55,
        height: 55,
        text: window.location.href,
        render: 'canvas'
      })
    },
    async getImgBase64 () {
      let ele = this.$refs['certificate']
      const width = ele.offsetWidth
      const height = ele.offsetHeight
      await html2canvas(ele, {
        scale: 2,
        width,
        height,
        backgroundColor: '#FFF'
      }).then(canvas => {
        // toDataURL 图片格式转成 base64
        let dataURL = canvas.toDataURL('image/jpeg')
        console.log(dataURL)
        this.downloadImage(dataURL)
      })
    },
    // 下载图片
    downloadImage (url) {
      // 如果是在网页中可以直接创建一个 a 标签直接下载
      let a = document.createElement('a')
      a.href = url
      a.download = '证书' + this.certInfo.certificateNo
      a.click()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.frame {
  -moz-box-shadow: 1px 1px 8px gray;
  -webkit-box-shadow: 1px 1px 8px gray;
  box-shadow: 1px 1px 8px gray;
  margin: 10px;
  display: inline-block;
  border: rgb(161, 53, 39, 0.7) 5px solid;
  position: relative;
}

.triangle {
  position: absolute;
  width: 0;
  height: 0;
}

.triangle-topleft {
  top: 0;
  left: 0;
  border-top: 10px solid rgb(161, 53, 39, 0.7);
  border-right: 10px solid transparent;
}

.triangle-topright {
  top: 0;
  right: 0;
  border-top: 10px solid rgb(161, 53, 39, 0.7);
  border-left: 10px solid transparent;
}

.triangle-bottomleft {
  bottom: 0;
  left: 0;
  border-bottom: 10px solid rgb(161, 53, 39, 0.7);
  border-right: 10px solid transparent;
}

.triangle-bottomright {
  bottom: 0;
  right: 0;
  border-bottom: 10px solid rgb(161, 53, 39, 0.7);
  border-left: 10px solid transparent;
}

.stripes {
  height: 400px;
  width: 600px;
  float: left;
  margin: 5px;
}

.test {
  background: repeating-linear-gradient(50deg, rgb(161, 53, 39, 0.2), rgb(161, 53, 39, 0.2) 1px, rgb(255, 223, 223, 0.2) 0, rgb(255, 223, 223, 0.2) 4px);
}

.title {
  width: 60%;
  margin: 0 20%;
  height: 50px;
  font-weight: bold;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
  font-family: '楷体', '楷体_GB2312';
  letter-spacing: 5px;
  border-bottom: rgb(161, 53, 39, 0.3) 1px solid;
}

.seal {
  opacity: 0.8;
  position: absolute;
  right: 30px;
  bottom: 40px;
  width: 100px;
  height: 100px;
  border: solid 6px rgb(161, 53, 39, 0.8);
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.seal-son {
  width: 90px;
  height: 90px;
  border: solid 2px rgb(161, 53, 39, 0.7);
  border-radius: 100%;
  position: relative;
}

.seal-span1 {
  position: absolute;
  top: 28px;
  left: 8px;
  text-align: center;
  font-size: 16px;
  transform: rotate(-30deg);
  color: rgb(161, 53, 39, 0.7);
  font-weight: 900;
}

.seal-span2 {
  position: absolute;
  top: 52px;
  left: 28px;
  text-align: center;
  font-size: 8px;
  transform: rotate(-30deg);
  color: rgb(161, 53, 39, 0.7);
}

.c-number {
  text-align: initial;
  padding: 0 10%;
  height: 40px;
  line-height: 40px;
  font-size: 13px;
  font-family: '宋体';
}

.content {
  padding: 0 10% 20px;
  height: 300px;
}

.content-l {
  float: left;
  display: table;
  width: 60%;
  height: 90%;
}

.content-r {
  float: left;
  width: 40%;
}

.c-img {
  margin: 30px;
  width: 140px;
  height: 200px;
  position: relative;
  background-color: #fff;
  display: inline-block;
  border: 1px solid rgb(240, 240, 240);
  box-shadow: 1px 1px 5px #ccc;
}

.c-img img {
  position: absolute;
  width: 90%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: auto;
  margin: auto;
}

.qr-box {
  position: absolute;
  top: 20px;
  right: 25px;
  width: 55px;
  height: 55px;
  display: inline-block;
  background-color: aliceblue;
}

.content-info {
  display: table-cell;
  vertical-align: middle;
}

.el-row {
  margin: 20px 0;
  font-size: 13px;
  font-family: '宋体';
}

.label-l {
  text-align: right;
}

.label-r {
  text-align:left;
}

</style>
